<template>
  <div>
    <div class="login-container">
    <!-- <div class="backgroud-iamge" /> -->
   
    <div style="position: absolute;left: 0;
top:0;
right: 0;
bottom: 0;">
      <vue-particles color="#FFFFFF" :particleOpacity="0.7" :particlesNumber="100" shapeType="circle" :particleSize="5"
        linesColor="#FFFFFF" :linesWidth="1.5" :lineLinked="true" :lineOpacity="0.5" :linesDistance="150" :moveSpeed="3"
        :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push">
      </vue-particles>
    </div>
    <div style="display:flex;align-items: center;width:100%;justify-content:center">
      <div  class="backToimg">
    <img src="../../assets/img/ob-signin.png" alt="" style="margin:11% 0px  0px 8%" />
    </div>
      <div class="logingBox">
      <div class="login-wrap">
        <div>
          <el-tabs class="reg-tab" v-model="activeName1">
            <el-tab-pane name="register">
              <span slot="label"> 注册</span>
              <el-form ref="ruleForm" :model="regRuleForm" class="loginForm" :rules="regRules">
                <el-form-item prop="mobile">
                  <el-input prefix-icon="el-icon-phone-outline" ref="mobile" v-model.trim="regRuleForm.mobile"
                    placeholder="请输入手机号" name="mobile" maxlength="16" />
                </el-form-item>
                <div style="
                    display: flex;
                    align-items: start;
                    justify-content: space-between;
                  ">
                  <el-form-item prop="sms_code" style="flex: 1;margin:0px 10px 10px 0px" >
                    <el-input style="width：70%;"  v-model="regRuleForm.sms_code" maxlength="8"
                      placeholder="请输入手机验证码" />
                  </el-form-item>
                  <el-button type="warning" plain style="width:35%; padding: 11px 15px;" @click="getCode"> <span style="color:#FFFFFF">
                    {{
                    codeBtnWord }}
                  </span>
                  </el-button>
                </div>
                <el-form-item prop="area">
                  <el-cascader popper-class="col" style="width: 190px" :options="areaData2" filterable clearable
                    v-model="regRuleForm.area" placeholder="请选择您所在城市" :props="{
                      value: 'id',
                      label: 'name',
                      children: 'next_level_data',
                    }" @change="handleChangeArea"></el-cascader>
                </el-form-item>
                <div>
                  <el-checkbox class="check" v-model="checked"></el-checkbox>
                  <span class="agreement">我已同意
                    <a style="color: #fe9400" href="javascript:;" @click="handleShowDialog">《用户隐私协议》</a></span>
                </div>
                <el-button class="loginBtn" type="warning" :disabled="disabled"
                  @click.native.prevent="handleRegister">注册并登录</el-button>
                <div class="operation-row" style="padding-top: 10px">
                  <el-link href="/permission/login" type="danger">立即登录</el-link>
                </div>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    </div>
 

  </div>
  <div>
    <Agreement type="secret" :visible="agreementDialog" @close="handleCloseDialog"></Agreement>
  </div>
  </div>

</template>
<script>
  import { login, random, getMobile, PersonRegister } from "@/api/user";
  import { setToken, getToken } from "@/utils/auth";
  import { regionList } from "@/page/material/common/common";
  import Agreement from "./components/agreement.vue";
  import cookie from "js-cookie";
  import md5 from "js-md5";
  import "./index.scss";
  export default {
    name: "Login",
    components: {
      Agreement,
    },
    data() {
      return {
        activeName: "userlogin",
        waitTime: 61, // 获取验证码按钮失效时间
        codeBtnWord: "获取短信验证码", // 获取验证码按钮文字
        alterrandom: true, // 默认隐藏验证码
        random: "", // 随机数图片
        authcode: "", //验证码
        // 登录按钮禁用 后续 验证通过为false
        disabled: false,
        using: "register",
        areaData2: [], //二级地址库
        activeName1: "register",
        regRuleForm: {},
        regRules: {
          mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
          sms_code: [
            { required: true, message: "请输入手机验证码", trigger: "blur" },
          ],
          area: [
            { required: true, message: "请选择您所在城市", trigger: "change" },
          ],
        },
        checked: false,
        agreementDialog: false,
      };
    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true,
      },
    },
    computed: {
      getCodeBtnDisable() {
        return false;
      },
    },
    created() {
      regionList(0).then((res) => {
        const data = res.data;
        data.forEach((item) => {
          item.next_level_data.forEach((iten) => {
            iten.next_level_data = undefined;
          });
        });
        this.areaData2 = data;
      });
    },
    updated() {
      let screenHeight = document.body.clientHeight
      let particlesCanvas = document.getElementsByTagName("canvas")[0];
      particlesCanvas.style.height = screenHeight-10 + "px";
    },
    methods: {
      checkPhone(phone) {
        const reg = /^1[3456789]\d{9}$/;
        if (!reg.test(phone)) {
          return false;
        }
        return true;
      },
      //隐私协议弹窗展示
      handleShowDialog() {
        this.agreementDialog = true;
      },
      //隐私协议弹窗关闭
      handleCloseDialog() {
        this.agreementDialog = false;
      },
      handleChangeArea(val) {
        if (val.length > 0) {
          this.regRuleForm.province_id = val[0] + "";
          this.regRuleForm.city_id = val[1] + "";
        }
      },
      getCode() {
        if (!this.checkPhone(this.regRuleForm.mobile)) {
          this.$message({
            message: "请填写正确的手机号",
            type: "warning",
            center: true,
          });
          return;
        }
        // console.log('1111');
        getMobile({ phone: this.regRuleForm.mobile }).then((res) => {
          if (res.code === 10000) {
            this.$message({
              message: "验证码已发送，请稍候...",
              type: "success",
              center: true,
            });
          }
        });
        // 因为下面用到了定时器，需要保存this指向
        const that = this;
        that.waitTime--;
        // that.getCodeBtnDisable = true;
        this.codeBtnWord = `${this.waitTime}s 后重新获取`;
        const timer = setInterval(function () {
          if (that.waitTime > 1) {
            that.waitTime--;
            that.codeBtnWord = `${that.waitTime}s 后重新获取`;
          } else {
            clearInterval(timer);
            that.codeBtnWord = "获取短信验证码";
            that.getCodeBtnDisable = false;
            that.waitTime = 61;
          }
        }, 1000);
      },
      handleRegister() {
        this.$refs["ruleForm"].validate((valid) => {
          if (!valid) return;
          if (!this.checked) {
            this.$message({
              type: "warning",
              message: "请先勾选协议",
            });
            return;
          }
          PersonRegister(this.regRuleForm).then((res) => {
            localStorage.setItem(
              "user_id",
              JSON.stringify(res.data.current_user.user_id)
            );
            setToken("Token", res.data.token);
            let type = (res.data.current_user || {}).user_type;
            if (type === 2 || type === 3) {
              this.$router.push({ path: "/infoManage/userCenter" });
            } else {
              this.$router.push({ path: "/" });
            }
            this.$store.dispatch("initLeftMenu");
            localStorage.setItem(
              "allUserInfo",
              JSON.stringify(res.data.all_user_info)
            );
            this.$store.commit("SET_USERINFO", res.data.current_user);
          });
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  /deep/.mobile_box .el-form-item {
    float: left !important;
    width: 90% !important;
  }

  /deep/.mobile_box .el-button--mini,
  /deep/.mobile_box.el-button--mini.is-round {
    padding: 11px 15px !important;
    margin-left: 5px;
  }

  /deep/.mobile_box .verification .el-input__inner {
    padding-left: 5px !important;
  }
  .el-button {
    background:  #F09937 !important;
    opacity: 0.9;
    border: none;
  }
  .el-button:hover {
    background: #D48D8D !important;
    opacity: 0.5;
    /* color: white !important; */
    font-weight: bold;
    /* border-color: #01a8f9 !important; */
  }
  /* .el-button:hover {
    background: #D48D8D !important;
    opacity: 0.5;
    font-weight: bold;
  } */
  .mobile_box .verification span {
    display: block;
    float: left;
    margin-right: 5px;
    line-height: 45px;
    color: #ff0000;
  }

  .reg-tab {
    .el-tabs__item>span {
      padding: 0 20px !important;
    }
  }

  /deep/.check .el-checkbox__input.is-checked .el-checkbox__inner,
  .check .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #f09937 !important;
    border-color: #f09937 !important;
  }

  /deep/.check .el-checkbox__inner {
    border-color: #dcdfe6 !important;
  }

  /deep/.check .el-checkbox__inner:hover {
    border-color: #f09937 !important;
  }
</style>
<style lang="less">
  .col {

    .el-cascader-node.in-active-path,
    .el-cascader-node.is-active,
    .el-cascader-node.is-selectable.in-checked-path {
      color: #f09937;
    }
  }
</style>